<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 400px;
            height: 200px;
            border: 2px solid gold;

        }

        .child{
            width: 350px;
            height: 80px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>

    <!-- 09 单向数据流-a的另一种写法 -->

    <div id="app">
        <div class="parent">
            <!-- {{msg}} -->
            <!-- event是我的一个事件，我传参就有数据 -->
            <!-- msg=$event -->
            <!-- 其实@input1="onInput($event)这个里面onInput()是可以写很多参数的，
                但是$event已经是vue帮我们定义好了的，这里由可以不写任何参数 -->


                <!-- $event.target.value把值给到了onInput事件，onInput就可以直接把值接收到，然后赋给父组件的msg -->
            <child-com :msg="msg" @input1="msg=$event"></child-com>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 单向数据流
        // 数据由父组件流向子组件
        // 子组件中不要直接修改父组件中的prop,会违背单向数据流的原理
        // 子组件中不要直接用v-model双向绑定父组件传来的props,相当于直接修改了父组件
        Vue.component("ChildCom",{
            // :value="msg"数据改变页面，msg变化，对应的页面也变化
            // @input="msg=$event.target.value"，页面改变数据，在页面是输入数据，然后赋值给msg

            // 子组件向父组件发送事件input1,发送的数据是input中输入的值，在标签中绑定input1事件，然后把值给到msg
            template: `<div class="child">
                            {{msg}}
                            <input type="text" :value="msg" @input="$emit('input1',$event.target.value)">
                       </div>`,
            props:["msg"] //props是响应式的
        })

        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Vue单向数据流"
            },
            
        })
    </script>
</body>
</html>